@reference "../../styles/index.css";

.container {
  @apply border-neutral-200
    bg-white
    lg:flex
    lg:h-16
    lg:flex-row
    lg:items-center
    lg:gap-8
    lg:border-b
    lg:px-8
    dark:border-neutral-900
    dark:bg-neutral-950;
}

.nodeIconAndMobileItemsToggler {
  @apply flex
    h-16
    shrink-0
    items-center
    border-b
    border-neutral-200
    px-4
    lg:flex
    lg:h-full
    lg:items-center
    lg:border-0
    lg:px-0
    dark:border-neutral-900;
}

.sidebarItemToggler {
  @apply absolute
    right-4
    -z-10
    -translate-y-[200%]
    appearance-none
    opacity-0;
}

.nodeIconWrapper {
  @apply h-[30px]
    flex-1;
}

.navInteractionIcon,
.sidebarItemToggler {
  @apply size-6;
}

.sidebarItemTogglerLabel {
  @apply block
    cursor-pointer
    lg:hidden;
}

.main {
  @apply flex-1
    flex-col
    justify-between
    gap-4
    lg:flex
    lg:flex-row
    lg:items-center;
}

.navItems {
  @apply flex
    flex-col
    gap-0
    border-b
    border-neutral-200
    p-4
    lg:flex-1
    lg:flex-row
    lg:gap-1
    lg:border-0
    lg:p-0
    dark:border-neutral-900;
}

.actionsWrapper {
  @apply flex
    flex-row
    flex-wrap
    items-center
    justify-between
    gap-2
    border-b
    border-neutral-200
    p-4
    sm:flex-nowrap
    lg:basis-96
    lg:border-0
    lg:p-0
    dark:border-neutral-900;
}

span.searchButtonSkeleton {
  @apply my-px
    mr-2
    flex-grow
    rounded-xl;

  &:empty {
    @apply h-10;
  }
}

span.themeToggleSkeleton {
  @apply size-9
    rounded-md
    py-4;
}

.ghIconWrapper {
  @apply size-9
    rounded-md
    p-2;

  svg {
    @apply fill-neutral-700
      dark:fill-neutral-300;
  }

  &:hover {
    @apply bg-neutral-100
      dark:bg-neutral-900;
  }
}
